<template>
  <div class="CommandStarIndex">
    <a-menu style="width: 350px" :open-keys.sync="openKeys" mode="inline" v-model="selectedKeys" @click="handleClick">
      <!-- <a-sub-menu key="sub2" @titleClick="titleClick">
        <span slot="title">
          <span>二级菜单</span>
        </span>
        <a-menu-item key="5">Option 5</a-menu-item>
        <a-menu-item key="6">Option 6</a-menu-item>
      </a-sub-menu>-->
      <a-sub-menu @titleClick="titleClick" v-for="(item, index) in subData" :key="item.label">
        <span slot="title">
          <span>{{ item.label }}</span>
        </span>
        <a-menu-item @click="handleInstruct" v-for="(i, indx) in item.children" :key="i.label">{{ i.label
          }}</a-menu-item>
      </a-sub-menu>

      <a-menu-item key="广播信息">广播信息</a-menu-item>
      <a-menu-item key="通用指令">通用指令</a-menu-item>
      <a-menu-item key="自定义指令">自定义指令</a-menu-item>
      <a-menu-item key="车地自定义消息">车地自定义消息</a-menu-item>
    </a-menu>
    <div class="instructBox">
      <div v-if="customInstructions" style="width: 100%;">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="自定义单条指令">
            <p>
              <a-textarea v-model="instructionContent" :auto-size="{ minRows: 33, maxRows:50 }" />
            </p>
            <a-select placeholder="请选择发送链接" v-model="channelId" style="width: 160px">
              <a-select-option v-for="item in channelList" :key="item.id" :value="item.id">{{ item.channelName
                }}</a-select-option>
            </a-select>
            <p style="width: 100%;text-align: right;">
              <!-- <a-button style="margin-right:20px">取消</a-button> -->
              <!-- <a-button type="primary" @click="sendInstructionContent(0)">发送</a-button> -->

              <a-popconfirm overlayClassName="poperLayTable"  title="确定发送吗?" @confirm="() => sendInstructionContent(0)">
                <a-button type="primary" style="margin-right:20px">发送</a-button>
              </a-popconfirm>
            </p>
          </a-tab-pane>
          <a-tab-pane key="2" tab="自定义指令导入">
            <custom-instruction-import />
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-else style="width: 100%;text-align: center;">
        <single-configuration @setInstructionContent="setInstructionContent" ref="singleConfiguration"
          :instructionType="selectedKeys[0]" />

        <a-card title="指令内容" style="width: 100%;text-align: center;">
          <p>
            <a-textarea v-model="instructionContent" :auto-size="{ minRows: 13, maxRows: 20 }" read-only />
          </p>
          <p style="width: 100%;text-align: right;">
            <!-- <a-button style="margin-right:20px">取消</a-button> -->
            <!-- <a-popconfirm title="确定取消吗?" @confirm="() => sendInstructionContent(1)">
              <a-button  style="margin-right:20px">取消</a-button>
            </a-popconfirm>-->
<!--            <a-popconfirm overlayClassName="poperLayTable"  title="确定发送吗?" @confirm="() => sendFlow(0)" v-if='sendFlowVis'>-->
<!--              <a-button type="primary" style="margin-right:20px">流程发送</a-button>-->
<!--            </a-popconfirm>-->
            <a-popconfirm overlayClassName="poperLayTable"  :title="confirmTitle" @confirm="() => sendInstructionContent(1)">
              <a-button type="primary" style="margin-right:20px">发送</a-button>
            </a-popconfirm>
          </p>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import CustomInstructionImport from './modules/customInstructionImport.vue';
import SingleConfiguration from './modules/singleConfiguration.vue';
export default {
  name: "CommandStarIndex",
  components: { CustomInstructionImport, SingleConfiguration },
  data() {
    return {
      sendFlowVis:false,
      openKeys: ['L频段配置指令'],//当前展开
      selectedKeys: ['L可控接收机1本振加指令'],//当前选中
      channelId: undefined,
      channelList: [],
      instructionContent: '',
      confirmTitle:'',
      customInstructions: false,
      formInline: {},
      url: {
        channelList: '/channel/nmcChannelInfo/list',
        sendInstruction: '/channel/nmcChannelInfo/noFlowSendPackage',
        noFlowSendPackage2: '/channel/nmcChannelInfo/noFlowSendPackage2',
        sendPackage:"/channel/nmcChannelInfo/sendPackage"
      },
      packageCode: '',
      subData: [
        {
          label: 'L频段配置指令', children: [
            {
              label: "L可控接收机1本振加指令",
              correspondingTelemetry: [
                { name: '123' },
                { name: '456' },
                { name: '789' },
              ]
            },
            {
              label: "L可控接收机1本振减指令",
              correspondingTelemetry: [
                { name: 'ADS' },
                { name: 'GFHG' },
                { name: 'DFH' },
              ]
            },
            { label: 'L可控接收机2本振加指令' },
            { label: 'L可控接收机2本振减指令' },
            { label: '电磁感知处理器L可控接收机控制指令' },
          ]
        },
        {
          label: 'Ka频段配置指令', children: [
            { label: "Ka接收机1频率加指令" },
            { label: "Ka接收机1频率减指令" },
            { label: "Ka接收机2频率加指令" },
            { label: "Ka接收机2频率减指令" },
            { label: "Ka接收机3频率加指令" },
            { label: "Ka接收机3频率减指令" },
            { label: "Ka上变频器1频率加指令" },
            { label: "Ka上变频器1频率减指令" },
            { label: "Ka上变频器2频率加指令" },
            { label: "Ka上变频器2频率减指令" },
            { label: "Ka上变频器3频率加指令" },
            { label: "Ka上变频器3频率减指令" },
            { label: "Ka上变频器4频率加指令" },
            { label: "Ka上变频器4频率减指令" },
          ]
        },
        {
          label: '通联业务处理器配置指令', children: [
            { label: "通联业务处理器接口及加解密模式控制" },
            { label: "通联业务处理器L星弹链路模式控制" },
            { label: "通联业务处理器L星弹链路频点控制" },
            { label: "通联业务处理器Ka星弹链路模式控制" },
            { label: "通联业务处理器星指链路模式控制" },
            { label: "通联业务处理器Ka星弹链路频点控制" },
            { label: "通联综合控制器导弹识别码设置指令" },
          ]
        },
        {
          label: '对时指令', children: [
            { label: "星车对时指令TSPU端" },
            { label: "星车对时指令TISU端" },
            { label: "通联综合控制器星地对时" },
          ]
        },
        {
          label: '加解密入退网用户控制指令', children: [
            { label: "加解密入网用户控制" },
            { label: "加解密退网用户控制" },
          ]
        },
        // {
        //   label: '星车作战交互指令', children: [
        //     { label: "星车周期交互启动指令(SPU)" },
        //     { label: "星弹直传参数设置指令(SPU)" },
        //     { label: "星弹直传启动终止指令(SPU)" },
        //     { label: "星车周期交互启动指令(HPCU)" },
        //     { label: "星弹直传参数设置指令(HPCU)" },
        //     { label: "星弹直传启动终止指令(HPCU)" },
        //
        //   ]
        // },
        {
          label: '使能禁止及DTU转发模式设置指令', children: [
            { label: "SPU跟踪目标下发使能开启" },
            { label: "SPU跟踪目标下发使能关闭" },
            { label: "SPU拦截目标下发使能开启" },
            { label: "SPU拦截目标下发使能关闭" },
            { label: "HPCU跟踪目标下发使能开启" },
            { label: "HPCU跟踪目标下发使能关闭" },
            { label: "HPCU拦截目标下发使能开启" },
            { label: "HPCU拦截目标下发使能关闭" },
            { label: "DTU转发模式设置" },

          ]
        },
        // {
        //   label: '通用指令', children: [
        //     { label: "通用指令" },
        //   ]
        // },
      ],
    };
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val);
    },

  },
  mounted() {
    this.getChannalList()
  },
  methods: {
    sendFlow(){
      httpAction(this.url.sendPackage,{packageCode:"89通联综合控制器星地对时",nmcPackageGridValues:[]},'post').then(res=>{
        if (res.success) {
          this.$message.success(res.message)
        }else {
          this.$message.error(res.message)
        }
      })
    },
    getChannalList() {
      getAction(this.url.channelList).then(res => {
        if (res.success) {
          this.channelList = res.result.records
        }
      })
    },
    handleInstruct(val) {
      this.instructionContent = ''
      console.log('点击---',val)
      setTimeout(()=>{
            let leftDiv=document.getElementById('leftDiv')
            console.log(leftDiv.offsetHeight,'Div的高度是----高度')
            let height=leftDiv.offsetHeight
            let rightDiv=document.getElementById('rightDiv')
            rightDiv.style.height=`${height} !important`
            rightDiv.style.overflow='auto !important'
            console.log(rightDiv,rightDiv.offsetHeight,'---------rightDiv.offsetHeight');
      },0)


        //   window.onload = function() {
        //   var myDiv = document.getElementById('leftDiv');
        //   var height = myDiv.offsetHeight;
        //   console.log('Div的高度是: ' + height + 'px');
        // }();
      if(val.key=='通联综合控制器星地对时'){
        this.sendFlowVis=true
      }else{

        this.sendFlowVis=false
      }
      if(val.key=='通联业务处理器接口及加解密模式控制'){
        this.confirmTitle='请确认已通过【加解密入网用户控制指令】向星上注入用户身份信息，否则会导致地面用户和移动车用户无法正常通信，确认发送本条指令吗？'
      }else if(val.key=='星车对时指令TISU端'){
        this.confirmTitle='请确认已发送【星车对时指令TSPU端】,再发送【星车对时指令TISU端】,确认发送本条指令吗？'
      }
      else{
        this.confirmTitle='确认发送吗？'
      }
    },
    setInstructionContent(instructionContent, packageCode) {
      this.instructionContent = instructionContent
      this.packageCode = packageCode
    },
    callback(key) {
      console.log(key);
    },
    sendInstructionContent(val) {
      if (!this.instructionContent) {
        this.$message.error('指令内容为空')
        return
      }

      // 不是944字节的数据将会导致业管乱掉
      if (this.instructionContent.length !== 1888) {
        this.$message.error('指令内容长度为：' + this.instructionContent.length + "(只允许发送944长度的自定义指令发送!)");
        return;
      }

      let data = {}
      let url = ''
      if (val == 0) {
        //自定义指令
        if (!this.channelId) {
          this.$message.error('请选择发送连接')
          return
        }
        url = this.url.noFlowSendPackage2
        data = {
          "hexString": this.instructionContent,
          // "packageCode": '自定义单条'
          channelId: this.channelId
        }
      } else if (val == 1) {

        url = this.url.sendInstruction
        data = {
          "hexString": this.instructionContent,
          "packageCode": this.packageCode
        }
      }
      httpAction(url, data, 'post').then(res => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
        // this.instructionContent = res.reslut
        // this.$emit('setInstructionContent', res.reslut)
        //传给父组件instructionContent
      })
    },
    handleClick(e) {
      if (e.key == '自定义指令') {
        this.customInstructions = true
      } else {
        this.customInstructions = false
      }
      console.log(e.key,'e.key');
      if (e.key == '通用指令' || e.key == '自定义指令' || e.key == '车地自定义消息'|| e.key == '广播信息') {
        this.instructionContent = ''
      }
      if (this.$refs.singleConfiguration) this.$refs.singleConfiguration.emptyData()
      //每次点击要重新获取该指令的值
    },
    titleClick(e) {
      // console.log('titleClick', e);
      this.openKeys.pop()
    },

  },
}
</script>

<style lang='less' scoped>
.CommandStarIndex {
  width: 100%;
  display: flex;
  min-height: 800px;
}

.instructBox {
  width: calc(100% - 350px);
  // padding: 16px;
  // background: peru;
  // border: 1px solid #1a7683;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .ant-card {
    // margin: auto;
    // margin: 20px auto;

    .ant-card-body {
      display: flex;

      .configInstructionBox {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      // p {
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      // }
    }
  }
}
</style>

<style lang="less" scoped>
.instructionValueBox .ant-menu-submenu>.ant-menu {
  background: transparent !important;
  color: #fff !important;
}

.instructionValueBox .ant-input-number .ant-input-number-handler-wrap {
  display: none !important;
  margin: 0 !important;
}

.instructionValueBox .ant-input-affix-wrapper .ant-input-prefix,
.instructionValueBox .ant-input-affix-wrapper .ant-input-suffix {
  color: #fff !important;
}

.CommandStarIndex .ant-menu {
  background: transparent !important;
  color: #fff !important;
}

.CommandStarIndex .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: rgba(27, 128, 223, 0.5) !important;
  color: #e3e3e3 !important;
}
.ant-menu-submenu > .ant-menu{
  background: transparent !important;
  color: #fff !important;

}
</style>
